<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵盔佑驰终端</title>
    <!-- 百度地图API -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=C81uBynkCqbFp9suE5SZF50pEzlsCyNM"></script>
    <!-- AOS动画库CSS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 主体背景 */
        body {
            font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #0a0f2c 0%, #000000 100%);
            background-attachment: fixed;
            min-height: 100vh;
            padding: 20px;
            color: #e0e0e0;
            margin: 0;
            overflow-x: hidden;
            position: relative;
        }
        
        /* 粒子效果画布 */
        #background-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        /* 增强字体 */
        h1, h2, h3, p {
            text-shadow: 0 0 15px rgba(0, 247, 255, 0.6), 0 0 25px rgba(0, 247, 255, 0.8);
        }
        
        /* 跌倒事件闪烁动画 */
        @keyframes fallBlink {
            0% { background-color: rgba(255, 0, 0, 0.3); }
            50% { background-color: rgba(255, 0, 0, 0.6); }
            100% { background-color: rgba(255, 0, 0, 0.3); }
        }
        
        .fall-alert {
            animation: fallBlink 0.5s ease-in-out 5;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }
        
        .header h1 {
            font-size: 3.5em;
            font-weight: 700;
            margin: 0;
            color: #00f7ff;
            letter-spacing: 3px;
            position: relative;
        }
        
        .status-bar {
            /* 玻璃拟态设计 */
            background: rgba(10, 15, 44, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.3);
            border-radius: 16px;
            padding: 20px 24px;
            margin-bottom: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #d0d0d0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .status-bar:hover {
            border-color: rgba(0, 247, 255, 0.6);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        }
        
        .status-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.2), transparent);
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .status-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 500;
            position: relative;
            z-index: 1;
        }
        
        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #00f7ff;
            box-shadow: 0 0 10px #00f7ff, 0 0 20px rgba(0, 247, 255, 0.4);
            animation: pulse 2s ease-in-out infinite;
            position: relative;
        }
        
        @keyframes pulse {
            0%, 100% { 
                transform: scale(1);
                opacity: 1;
            }
            50% { 
                transform: scale(1.1);
                opacity: 0.8;
            }
        }
        
        .controls {
            text-align: center;
            margin-bottom: 32px;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            position: relative;
            z-index: 10;
        }
        
        /* 玻璃拟态按钮设计 */
        .btn {
            background: rgba(10, 15, 44, 0.4);
            color: #00f7ff;
            border: none;
            padding: 14px 32px;
            border-radius: 30px;
            cursor: pointer;
            margin: 0 10px;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 4px 20px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            letter-spacing: 1px;
            text-transform: uppercase;
            min-width: 160px;
            text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.3);
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.2), 
                transparent);
            transition: left 0.6s;
        }
        
        .btn:hover {
            background: rgba(0, 247, 255, 0.2);
            transform: translateY(-4px) scale(1.03);
            /* 强烈的霓虹发光效果 */
            box-shadow: 
                0 8px 30px rgba(0, 247, 255, 0.4),
                0 4px 15px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(0, 247, 255, 0.6);
        }
        
        /* 主要按钮特殊样式 */
        .btn.primary {
            background: rgba(0, 247, 255, 0.2);
            color: #ffffff;
            font-weight: 600;
        }
        
        .btn.primary:hover {
            background: rgba(0, 247, 255, 0.4);
            box-shadow: 
                0 8px 30px rgba(0, 247, 255, 0.6),
                0 4px 15px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(0, 247, 255, 0.8);
        }
        
        /* 按钮点击波纹效果 */
        .btn .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(0, 247, 255, 0.6);
            transform: scale(0);
            animation: ripple 0.6s linear;
        }
        
        @keyframes ripple {
            to {
                transform: scale(2.5);
                opacity: 0;
            }
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: 1fr;
            gap: 28px;
            margin-bottom: 36px;
        }
        
        /* 卡片玻璃拟态设计 */
        .card {
            background: rgba(10, 15, 44, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.3);
            border-radius: 20px;
            padding: 32px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
            border-color: rgba(0, 247, 255, 0.6);
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            /* 霓虹蓝线 */
            background: linear-gradient(90deg, transparent, #00f7ff, transparent);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0, 247, 255, 0.15);
            position: relative;
        }
        
        .card-title {
            font-size: 1.5em;
            font-weight: 500;
            color: #00f7ff;
            margin: 0;
            letter-spacing: 0.5px;
        }
        
        .device-id {
            font-size: 0.9em;
            color: rgba(224, 224, 224, 0.8);
            background: rgba(0, 247, 255, 0.15);
            padding: 6px 14px;
            border-radius: 14px;
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.25);
            font-weight: 500;
        }
        
        .data-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 22px;
        }
        
        /* 数据项玻璃拟态设计 */
        .data-item {
            background: rgba(20, 30, 60, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.2);
            border-radius: 16px;
            padding: 22px;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        .data-item:hover {
            background: rgba(0, 247, 255, 0.1);
            border-color: rgba(0, 247, 255, 0.4);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }
        
        .data-label {
            font-size: 0.85em;
            color: rgba(224, 224, 224, 0.7);
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
        }
        
        .data-value {
            font-size: 1.7em;
            font-weight: 600;
            color: #00f7ff;
            font-family: 'Segoe UI', 'Roboto', sans-serif;
            margin-bottom: 5px;
            text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
        }
        
        .data-unit {
            font-size: 0.9em;
            color: rgba(224, 224, 224, 0.6);
            font-weight: 400;
        }
        
        .timestamp {
            text-align: center;
            color: rgba(224, 224, 224, 0.6);
            font-size: 0.9em;
            margin-top: 24px;
            padding-top: 22px;
            border-top: 1px solid rgba(0, 247, 255, 0.15);
            font-weight: 400;
        }
        
        .no-data {
            text-align: center;
            color: rgba(224, 224, 224, 0.5);
            font-style: italic;
            padding: 70px 20px;
            font-size: 1.2em;
        }
        
        /* 事件列表样式 */
        .event-panel {
            background: rgba(10, 15, 44, 0.8);
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.3);
            border-radius: 20px;
            padding: 32px;
            min-height: 420px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .event-panel:hover {
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
            border-color: rgba(0, 247, 255, 0.6);
        }
        
        .event-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            /* 霓虹蓝线 */
            background: linear-gradient(90deg, transparent, #00f7ff, transparent);
        }
        
        .event-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0, 247, 255, 0.15);
        }
        
        .event-panel-title {
            font-size: 1.5em;
            font-weight: 500;
            color: #00f7ff;
            margin: 0;
            letter-spacing: 0.5px;
        }
        
        .event-counter {
            font-size: 0.9em;
            color: rgba(224, 224, 224, 0.8);
            background: rgba(0, 247, 255, 0.15);
            padding: 6px 14px;
            border-radius: 14px;
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.25);
            font-weight: 500;
        }
        
        .event-list {
            max-height: 340px;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .event-item {
            background: rgba(20, 30, 60, 0.8);
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.1);
            border-radius: 14px;
            padding: 18px 22px;
            margin-bottom: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .event-item:hover {
            background: rgba(0, 247, 255, 0.1);
            border-color: rgba(0, 247, 255, 0.25);
            transform: translateX(5px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }
        
        .event-info {
            display: flex;
            align-items: center;
            gap: 18px;
        }
        
        .event-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            position: relative;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        /* 保留事件图标样式，包括fall */
        .event-icon.fall { 
            background: linear-gradient(135deg, #ff00ff, #ff0080);
            box-shadow: 0 4px 12px rgba(255, 0, 255, 0.3);
        }
        .event-icon.slow { 
            background: linear-gradient(135deg, #00f7ff, #0080ff);
            box-shadow: 0 4px 12px rgba(0, 247, 255, 0.3);
        }
        .event-icon.turn-left { 
            background: linear-gradient(135deg, #ff00ff, #8000ff);
            box-shadow: 0 4px 12px rgba(255, 0, 255, 0.3);
        }
        .event-icon.turn-right { 
            background: linear-gradient(135deg, #00f7ff, #00b3ff);
            box-shadow: 0 4px 12px rgba(0, 247, 255, 0.3);
        }
        
        .event-details {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .event-type {
            font-weight: 500;
            color: #00f7ff;
            font-size: 1em;
        }
        
        .event-device {
            font-size: 0.85em;
            color: rgba(224, 224, 224, 0.7);
            font-weight: 400;
        }
        
        .event-time {
            font-size: 0.85em;
            color: rgba(224, 224, 224, 0.6);
            font-weight: 400;
            font-family: 'Segoe UI', 'Roboto', monospace;
        }
        
        .event-empty {
            text-align: center;
            color: rgba(224, 224, 224, 0.5);
            font-style: italic;
            padding: 70px 20px;
            font-size: 1.2em;
        }
        
        /* 滚动条样式 */
        .event-list::-webkit-scrollbar {
            width: 6px;
        }
        
        .event-list::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 3px;
        }
        
        .event-list::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #00f7ff, #0080ff);
            border-radius: 3px;
        }
        
        .event-list::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #00f7ff, #00b3ff);
        }
        
        /* 地图容器样式 */
        #baiduMap {
            width: 100%;
            height: 500px;
            border-radius: 20px;
            border: 1px solid rgba(0, 247, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            margin-bottom: 32px;
            overflow: hidden;
        }
        
        .map-container {
            background: rgba(10, 15, 44, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.3);
            border-radius: 20px;
            padding: 32px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .map-container:hover {
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
            border-color: rgba(0, 247, 255, 0.6);
        }
        
        .map-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            /* 霓虹蓝线 */
            background: linear-gradient(90deg, transparent, #00f7ff, transparent);
        }
        
        .map-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0, 247, 255, 0.15);
        }
        
        .map-title {
            font-size: 1.5em;
            font-weight: 500;
            color: #00f7ff;
            margin: 0;
            letter-spacing: 0.5px;
        }
        
        .map-info {
            font-size: 0.9em;
            color: rgba(224, 224, 224, 0.8);
            background: rgba(0, 247, 255, 0.15);
            padding: 6px 14px;
            border-radius: 14px;
            /* 细霓虹边框 */
            border: 1px solid rgba(0, 247, 255, 0.25);
            font-weight: 500;
        }
        
        .loading {
            text-align: center;
            color: #00f7ff;
            font-size: 1.2em;
            margin: 45px 0;
            font-weight: 500;
            text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
        }
        
        .error {
            background: rgba(255, 0, 0, 0.15);
            color: #ff0000;
            border: 1px solid rgba(255, 0, 0, 0.3);
            padding: 22px;
            border-radius: 14px;
            margin: 22px 0;
            text-align: center;
            font-weight: 500;
        }
        
        /* 输入框聚焦动画 */
        input:focus {
            outline: none;
            border-bottom: 1px solid #00f7ff;
            position: relative;
        }
        
        input:focus::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: #00f7ff;
            animation: inputFocus 0.3s forwards;
        }
        
        @keyframes inputFocus {
            to {
                width: 100%;
                left: 0;
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <!-- 添加动态粒子效果 -->
    <canvas id="background-particles"></canvas>
    
    <div class="container">
        <div class="header" data-aos="fade-down">
            <h1>灵盔佑驰终端</h1>
        </div>
        
        <div class="status-bar" data-aos="fade-up" data-aos-delay="100">
            <div class="status-item">
                <div class="status-indicator"></div>
                <span id="connection-status">连接状态: 正在连接...</span>
            </div>
            <div class="status-item">
                <span id="device-count">设备数量: 0</span>
            </div>
            <div class="status-item">
                <span id="last-update">最后更新: 从未</span>
            </div>
        </div>
        
        <div class="controls" data-aos="fade-up" data-aos-delay="200">
            <button class="btn" onclick="refreshData()">刷新数据</button>
            <button class="btn" onclick="toggleAutoRefresh()"><span id="auto-refresh-text">开启自动刷新</span></button>
            <button class="btn" onclick="clearTrack()">清除轨迹</button>
            <button class="btn" onclick="clearAllData()">清除数据</button>
        </div>
        
        <div id="loading" class="loading" data-aos="fade-up" data-aos-delay="300">正在加载传感器数据...</div>
        <div id="error" class="error" style="display: none;" data-aos="fade-up" data-aos-delay="300"></div>
        
        <!-- 百度地图容器 -->
        <div class="map-container" data-aos="zoom-in-up" data-aos-delay="400">
            <div class="map-header">
                <div class="map-title">设备位置地图</div>
                <div class="map-info" id="current-position">当前位置: 福建省福州市 | 轨迹点数: 0</div>
            </div>
            <div id="baiduMap"></div>
        </div>
        
        <div id="dashboard" class="dashboard"></div>
        
        <!-- 事件监控面板 -->
        <div class="event-panel" data-aos="fade-up" data-aos-delay="500">
            <div class="event-panel-header">
                <div class="event-panel-title">设备事件监控</div>
                <div class="event-counter" id="event-counter">事件总数: 0</div>
            </div>
            <div class="event-list" id="event-list">
                <div class="event-empty">暂无事件记录</div>
            </div>
        </div>
    </div>
    
    <!-- AOS动画库JS -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        // 初始化AOS动画
        if (typeof AOS !== 'undefined') {
            AOS.init({
                duration: 800,
                easing: 'ease-out-cubic',
                once: true,
                offset: 120
            });
        }
        
        const API_BASE_URL = 'http://localhost:8081/api/sensor';
        const WS_URL = 'ws://localhost:8081/ws/sensor-data';
        let autoRefreshInterval = null;
        let isAutoRefreshEnabled = false;
        let websocket = null;
        let eventHistory = []; // 存储事件历史
        let lastEventState = {}; // 存储上次的事件状态，用于检测变化
        
        // 百度地图相关变量
        let baiduMap = null;
        let currentMarker = null;
        let currentInfoWindow = null;
        let trackPolyline = null; // 轨迹路径线
        let shadowPolyline = null; // 阴影路径线
        let trackPoints = []; // 存储轨迹点
        let trackMarkers = []; // 存储轨迹标记点
        // 福州市的经纬度坐标
        const FUZHOU_LNG = 119.296494; // 经度
        const FUZHOU_LAT = 26.074507;  // 纬度
        
        // 添加粒子效果初始化
        document.addEventListener('DOMContentLoaded', function() {
            initBackgroundParticles();
            // 初始化百度地图
            initBaiduMap();
            refreshData();
            connectWebSocket();
        });
        
        // 添加语音播报功能
        function speakText(text) {
            // 检查浏览器是否支持语音合成
            if ('speechSynthesis' in window) {
                // 创建语音合成实例
                const utterance = new SpeechSynthesisUtterance(text);
                
                // 设置语音参数（可选）
                utterance.rate = 1;      // 语速 (0.1 - 10)
                utterance.pitch = 1;     // 音调 (0 - 2)
                utterance.volume = 1;    // 音量 (0 - 1)
                
                // 查找中文语音
                const voices = speechSynthesis.getVoices();
                const chineseVoice = voices.find(voice => 
                    voice.lang.includes('zh') || voice.name.includes('Chinese') || voice.name.includes('中文')
                );
                
                if (chineseVoice) {
                    utterance.voice = chineseVoice;
                }
                
                // 播放语音
                speechSynthesis.speak(utterance);
            } else {
                console.warn('当前浏览器不支持语音合成');
            }
        }
        
        // 滚动到事件监控面板并高亮显示跌倒事件
        function scrollToFallEvent() {
            // 获取事件监控面板元素
            const eventPanel = document.querySelector('.event-panel');
            
            // 平滑滚动到事件监控面板
            eventPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
            
            // 获取最新的跌倒事件元素（第一个事件项）
            const latestEventItem = document.querySelector('.event-item');
            
            if (latestEventItem) {
                // 添加闪烁类名
                latestEventItem.classList.add('fall-alert');
                
                // 5秒后移除闪烁效果
                setTimeout(() => {
                    latestEventItem.classList.remove('fall-alert');
                }, 5000);
            }
        }
        
        // 初始化背景粒子效果
        function initBackgroundParticles() {
            const canvas = document.getElementById('background-particles');
            const ctx = canvas.getContext('2d');
            let particles = [];
            
            // 定义多种霓虹颜色
            const neonColors = [
                '#00f7ff',  // 亮青色
                '#ff00ff',  // 紫红色
                '#ff0080',  // 霓虹粉
                '#ff6600'   // 电光橙
            ];
            
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();
            
            function initParticles() {
                particles = [];
                for (let i = 0; i < 200; i++) {
                    particles.push({
                        x: Math.random() * canvas.width,
                        y: Math.random() * canvas.height,
                        r: Math.random() * 2 + 1,
                        dx: (Math.random() - 0.5) * 0.5,
                        dy: (Math.random() - 0.5) * 0.5,
                        color: neonColors[Math.floor(Math.random() * neonColors.length)]  // 随机选择颜色
                    });
                }
            }
            
            function drawParticles() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                particles.forEach(p => {
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
                    ctx.fillStyle = p.color;
                    ctx.fill();
                    p.x += p.dx;
                    p.y += p.dy;
                    if (p.x < 0 || p.x > canvas.width) p.dx *= -1;
                    if (p.y < 0 || p.y > canvas.height) p.dy *= -1;
                });
                requestAnimationFrame(drawParticles);
            }
            
            initParticles();
            drawParticles();
        }
        
        // 初始化百度地图
        function initBaiduMap() {
            try {
                // 创建地图实例
                baiduMap = new BMap.Map('baiduMap');
                
                // 设置初始位置为福州市
                const fuzhou = new BMap.Point(FUZHOU_LNG, FUZHOU_LAT);
                baiduMap.centerAndZoom(fuzhou, 12); // 级别12是城市级别
                
                // 启用鼠标滚轮缩放
                baiduMap.enableScrollWheelZoom(true);
                
                // 添加地图控件
                baiduMap.addControl(new BMap.NavigationControl());  // 平移缩放控件
                baiduMap.addControl(new BMap.ScaleControl());       // 比例尺控件
                baiduMap.addControl(new BMap.OverviewMapControl()); // 缩略地图控件
                baiduMap.addControl(new BMap.MapTypeControl());     // 地图类型控件
                
                // 创建初始标记点（福州市）
                createLocationMarker(FUZHOU_LAT, FUZHOU_LNG, '福州市（初始位置）');
                
                console.log('百度地图初始化成功');
            } catch (error) {
                console.error('百度地图初始化失败:', error);
                document.getElementById('current-position').textContent = '地图加载失败';
            }
        }
        
        // 创建或更新位置标记
        function createLocationMarker(lat, lng, title) {
            if (!baiduMap) return;
            
            const point = new BMap.Point(lng, lat);
            
            // 如果已存在标记，先移除
            if (currentMarker) {
                baiduMap.removeOverlay(currentMarker);
            }
            
            // 创建新标记
            currentMarker = new BMap.Marker(point);
            baiduMap.addOverlay(currentMarker);
            
            // 创建信息窗口
            const infoContent = 
                '<div style="font-size: 14px; color: #333;">' +
                '<div style="font-weight: bold; margin-bottom: 8px;">' + title + '</div>' +
                '<div>经度: ' + lng.toFixed(6) + '</div>' +
                '<div>纬度: ' + lat.toFixed(6) + '</div>' +
                '<div style="margin-top: 8px; color: #666; font-size: 12px;">点击标记查看详情</div>' +
                '</div>';
            
            const infoWindow = new BMap.InfoWindow(infoContent);
            
            // 给标记添加点击事件
            currentMarker.addEventListener('click', function() {
                baiduMap.openInfoWindow(infoWindow, point);
            });
            
            // 更新位置信息显示（使用统一的更新函数）
            updateTrackInfo();
        }
        
        // 建立WebSocket连接
        function connectWebSocket() {
            try {
                websocket = new WebSocket(WS_URL);
                
                websocket.onopen = function(event) {
                    console.log('WebSocket连接已建立');
                    document.getElementById('connection-status').textContent = '连接状态: WebSocket已连接，等待设备数据...';
                };
                
                websocket.onmessage = function(event) {
                    try {
                        // 首先检查数据是否为JSON格式
                        let data;
                        try {
                            data = JSON.parse(event.data);
                        } catch (parseError) {
                            // 如果不是JSON格式，可能是文本消息，直接忽略
                            console.log('收到WebSocket文本消息:', event.data);
                            return;
                        }
                        
                        console.log('收到WebSocket数据:', data);
                        
                        // 如果是传感器数据，立即更新显示
                        if (data.deviceId) {
                            updateSensorData([data]); // 使用平滑更新而不是重新渲染
                            // 检查并处理事件
                            processDeviceEvents(data);
                            // 更新地图位置（如果有GPS数据）
                            updateMapLocation(data);
                            updateLastUpdateTime();
                            // 更新设备数量
                            document.getElementById('device-count').textContent = '设备数量: 1';
                        }
                        // 如果是状态消息，更新状态显示
                        else if (data.type === 'status') {
                            console.log('状态更新:', data.message);
                            document.getElementById('connection-status').textContent = '连接状态: ' + data.message;
                        }
                    } catch (error) {
                        console.error('处理WebSocket数据失败:', error);
                    }
                };
                
                websocket.onclose = function(event) {
                    console.log('WebSocket连接已关闭');
                    document.getElementById('connection-status').textContent = '连接状态: WebSocket已断开';
                    // 5秒后尝试重连
                    setTimeout(connectWebSocket, 5000);
                };
                
                websocket.onerror = function(error) {
                    console.error('WebSocket错误:', error);
                    document.getElementById('connection-status').textContent = '连接状态: WebSocket错误';
                };
                
            } catch (error) {
                console.error('建立WebSocket连接失败:', error);
                document.getElementById('connection-status').textContent = '连接状态: 连接失败';
            }
        }
        
        
        // 更新地图位置
        function updateMapLocation(data) {
            if (!data || !baiduMap) return;
            
            const lat = data.latitude;
            const lng = data.longitude;
            
            // 检查是否有有效的GPS数据
            if (lat !== null && lat !== undefined && lng !== null && lng !== undefined &&
                lat !== 0 && lng !== 0 && !isNaN(lat) && !isNaN(lng)) {
                
                console.log('更新地图位置:', lat, lng);
                
                // 创建新的坐标点
                const point = new BMap.Point(lng, lat);
                
                // 添加到轨迹点列表
                addTrackPoint(point, data.deviceId, data.receiveTime);
                
                // 创建或更新当前位置标记
                const deviceTitle = '设备 ' + (data.deviceId || '未知') + ' 实时位置';
                createLocationMarker(lat, lng, deviceTitle);
                
                // 将地图中心移动到新位置（但不改变缩放级别）
                baiduMap.panTo(point);
                
                // 更新轨迹显示
                updateTrackDisplay();
            }
        }
        
        // 添加轨迹点
        function addTrackPoint(point, deviceId, timestamp) {
            // 添加点到轨迹数组
            trackPoints.push({
                point: point,
                deviceId: deviceId,
                timestamp: timestamp,
                index: trackPoints.length
            });
            
            // 限制轨迹点数量（最多保存100个点）
            if (trackPoints.length > 100) {
                trackPoints.shift(); // 移除最早的点
            }
            
            console.log('添加轨迹点:', point.lng, point.lat, '总点数:', trackPoints.length);
        }
        
        // 更新轨迹显示（优化版本）
        function updateTrackDisplay() {
            if (!baiduMap || trackPoints.length < 2) {
                updateTrackInfo();
                return;
            }
            
            // 如果已存在轨迹线，先移除
            if (trackPolyline) {
                baiduMap.removeOverlay(trackPolyline);
            }
            if (shadowPolyline) {
                baiduMap.removeOverlay(shadowPolyline);
            }
            
            // 对轨迹点进行平滑和修正处理
            const smoothedPoints = smoothTrackPoints(trackPoints);
            
            // 创建轨迹点数组
            const points = smoothedPoints.map(trackPoint => trackPoint.point);
            
            // 创建阴影路径线（先添加）
            shadowPolyline = new BMap.Polyline(points, {
                strokeColor: '#000000',
                strokeWeight: 6,
                strokeOpacity: 0.2,
                strokeStyle: 'solid'
            });
            
            // 创建主路径线（后添加）
            trackPolyline = new BMap.Polyline(points, {
                strokeColor: '#00f7ff',    // 亮青色路径
                strokeWeight: 4,           // 线条宽度
                strokeOpacity: 0.8,        // 透明度
                strokeStyle: 'solid'       // 实线
            });
            
            // 先添加阴影，再添加主线条
            baiduMap.addOverlay(shadowPolyline);
            baiduMap.addOverlay(trackPolyline);
            
            // 更新信息显示
            updateTrackInfo();
            
            console.log('轨迹显示已更新，共', points.length, '个点（已平滑处理）');
        }
        
        // GPS轨迹点平滑和修正处理
        function smoothTrackPoints(rawPoints) {
            // 如果点数太少，直接返回原始点
            if (rawPoints.length < 2) {
                return rawPoints;
            }
            
            const smoothedPoints = [];
            // 放宽过滤条件，避免正常移动被误判为异常
            const maxDistance = 0.1; // 最大允许距离（度），约为10公里
            const maxSpeed = 0.01;   // 最大允许速度（度/秒），更宽松
            
            // 第一个点总是保留
            smoothedPoints.push(rawPoints[0]);
            
            for (let i = 1; i < rawPoints.length; i++) {
                const currentPoint = rawPoints[i];
                const lastPoint = smoothedPoints[smoothedPoints.length - 1];
                
                // 计算距离和时间间隔
                const distance = calculateDistance(
                    lastPoint.point.lat, lastPoint.point.lng,
                    currentPoint.point.lat, currentPoint.point.lng
                );
                
                const timeDiff = (new Date(currentPoint.timestamp) - new Date(lastPoint.timestamp)) / 1000; // 秒
                const speed = timeDiff > 0 ? distance / timeDiff : 0;
                
                // 判断是否为异常点
                const isAbnormal = distance > maxDistance || speed > maxSpeed;
                
                if (isAbnormal) {
                    console.log(`检测到异常GPS点: 距离=${distance.toFixed(6)}, 速度=${speed.toFixed(6)}, 已过滤`);
                    // 即使是异常点，也添加到轨迹中，但标记为异常
                    smoothedPoints.push(currentPoint);
                } else {
                    // 正常点，直接添加
                    smoothedPoints.push(currentPoint);
                }
            }
            
            console.log(`轨迹处理完成: 原始${rawPoints.length}点 -> 处理后${smoothedPoints.length}点`);
            return smoothedPoints;
        }
        
        // 计算两点间距离（简化版）
        function calculateDistance(lat1, lng1, lat2, lng2) {
            const dLat = Math.abs(lat2 - lat1);
            const dLng = Math.abs(lng2 - lng1);
            return Math.sqrt(dLat * dLat + dLng * dLng); // 简化计算，不考虑地球曲率
        }
        
        // 更新轨迹信息显示
        function updateTrackInfo() {
            const currentPosElement = document.getElementById('current-position');
            if (!currentPosElement) return;
            
            let infoText = '当前位置: ';
            
            if (trackPoints.length > 0) {
                const lastPoint = trackPoints[trackPoints.length - 1];
                const lat = lastPoint.point.lat.toFixed(4);
                const lng = lastPoint.point.lng.toFixed(4);
                infoText += `设备 ${lastPoint.deviceId} (${lat}, ${lng})`;
            } else {
                infoText += '福建省福州市';
            }
            
            infoText += ` | 轨迹点数: ${trackPoints.length}`;
            currentPosElement.textContent = infoText;
        }
        
        // 刷新数据函数
        async function refreshData() {
            showLoading(true);
            hideError();
            
            try {
                // 获取系统状态
                await updateSystemStatus();
                
                // 获取最新的传感器数据
                const response = await fetch(API_BASE_URL + '/latest');
                if (!response.ok) {
                    throw new Error('HTTP ' + response.status + ': ' + response.statusText);
                }
                
                const sensorDataList = await response.json();
                renderSensorData(sensorDataList);
                // 检查并处理事件
                sensorDataList.forEach(data => {
                    processDeviceEvents(data);
                    updateMapLocation(data);
                });
                updateLastUpdateTime();
                
            } catch (error) {
                console.error('获取数据失败:', error);
                showError('无法获取传感器数据: ' + error.message);
            } finally {
                showLoading(false);
            }
        }
        
        // 更新系统状态
        async function updateSystemStatus() {
            try {
                const response = await fetch(API_BASE_URL + '/status');
                if (response.ok) {
                    const status = await response.json();
                    // 根据设备数量显示不同的状态信息
                    let statusText = '连接状态: ';
                    const deviceCount = status.deviceCount || 0;
                    if (deviceCount > 0) {
                        statusText += '运行中';
                    } else {
                        statusText += '空闲 (等待设备连接)';
                    }
                    document.getElementById('connection-status').textContent = statusText;
                    document.getElementById('device-count').textContent = 
                        '设备数量: ' + deviceCount;
                } else {
                    document.getElementById('connection-status').textContent = '连接状态: 后端服务异常';
                }
            } catch (error) {
                document.getElementById('connection-status').textContent = '连接状态: 后端服务连接失败';
            }
        }
        
        // 渲染传感器数据
        function renderSensorData(sensorDataList) {
            const dashboard = document.getElementById('dashboard');
            
            if (!sensorDataList || sensorDataList.length === 0) {
                dashboard.innerHTML = '<div class="no-data">暂无传感器数据</div>';
                return;
            }
            
            // 为每个传感器卡片添加data-aos属性
            dashboard.innerHTML = sensorDataList.map((data, index) => {
                // 计算延迟时间，每个卡片递增100ms
                const delay = 300 + (index * 100);
                return createSensorCard(data, delay);
            }).join('');
            AOS.refresh();
        }
        
        // 平滑更新传感器数据（用于WebSocket实时更新）
        function updateSensorData(sensorDataList) {
            const dashboard = document.getElementById('dashboard');
            const existingCards = dashboard.getElementsByClassName('card');
            
            // 如果卡片数量不匹配，重新渲染
            if (existingCards.length !== sensorDataList.length) {
                renderSensorData(sensorDataList);
                return;
            }
            
            // 更新每个卡片的数据
            for (let i = 0; i < sensorDataList.length; i++) {
                const data = sensorDataList[i];
                const card = existingCards[i];
                
                // 更新设备ID
                const deviceIdElement = card.querySelector('.device-id');
                if (deviceIdElement) {
                    deviceIdElement.textContent = 'ID: ' + (data.deviceId || '未知');
                }
                
                // 更新温度值
                const temperatureElement = card.querySelector('.data-grid .data-item:nth-child(1) .data-value');
                if (temperatureElement) {
                    const tempValue = data.temperature !== null && data.temperature !== undefined ? 
                        data.temperature + ' °C' : 
                        '无数据';
                    temperatureElement.innerHTML = tempValue;
                }
                
                // 更新湿度值
                const humidityElement = card.querySelector('.data-grid .data-item:nth-child(2) .data-value');
                if (humidityElement) {
                    const humidityValue = data.humidity !== null && data.humidity !== undefined ? 
                        data.humidity + ' %' : 
                        '无数据';
                    humidityElement.innerHTML = humidityValue;
                }
                
                // 更新经度值
                const longitudeElement = card.querySelector('.data-grid .data-item:nth-child(3) .data-value');
                if (longitudeElement) {
                    const longitudeValue = data.longitude !== null && data.longitude !== undefined ? 
                        data.longitude + ' °' : 
                        '无数据';
                    longitudeElement.innerHTML = longitudeValue;
                }
                
                // 更新纬度值
                const latitudeElement = card.querySelector('.data-grid .data-item:nth-child(4) .data-value');
                if (latitudeElement) {
                    const latitudeValue = data.latitude !== null && data.latitude !== undefined ? 
                        data.latitude + ' °' : 
                        '无数据';
                    latitudeElement.innerHTML = latitudeValue;
                }
                
                // 更新时间
                const timestampElement = card.querySelector('.timestamp');
                if (timestampElement) {
                    timestampElement.textContent = '接收时间: ' + formatDateTime(data.receiveTime);
                }
            }
        }
        
        // 创建传感器卡片（只显示环境数据）
        function createSensorCard(data, delay = 0) {
            const formatValue = (value, unit) => {
                unit = unit || '';
                return value !== null && value !== undefined ? 
                    value + ' <span class="data-unit">' + unit + '</span>' : 
                    '<span style="color: #888;">无数据</span>';
            };
            
            return '<div class="card" data-aos="fade-up" data-aos-delay="' + delay + '">' +
                '<div class="card-header">' +
                    '<div class="card-title">环境数据监控</div>' +
                    '<div class="device-id">ID: ' + (data.deviceId || '未知') + '</div>' +
                '</div>' +
                '<div class="data-grid">' +
                    '<div class="data-item" data-aos="fade-right" data-aos-delay="' + (delay + 100) + '">' +
                        '<div class="data-label">温度</div>' +
                        '<div class="data-value">' + formatValue(data.temperature, '°C') + '</div>' +
                    '</div>' +
                    '<div class="data-item" data-aos="fade-right" data-aos-delay="' + (delay + 200) + '">' +
                        '<div class="data-label">湿度</div>' +
                        '<div class="data-value">' + formatValue(data.humidity, '%') + '</div>' +
                    '</div>' +
                    '<div class="data-item" data-aos="fade-right" data-aos-delay="' + (delay + 300) + '">' +
                        '<div class="data-label">经度</div>' +
                        '<div class="data-value">' + formatValue(data.longitude, '°') + '</div>' +
                    '</div>' +
                    '<div class="data-item" data-aos="fade-right" data-aos-delay="' + (delay + 400) + '">' +
                        '<div class="data-label">纬度</div>' +
                        '<div class="data-value">' + formatValue(data.latitude, '°') + '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="timestamp">' +
                    '接收时间: ' + formatDateTime(data.receiveTime) +
                '</div>' +
            '</div>';
        }
        
        // 处理设备事件（检测标志位变化）
        function processDeviceEvents(data) {
            const deviceId = data.deviceId;
            const currentTime = new Date();
            
            // 获取上次状态
            const lastState = lastEventState[deviceId] || {};
            
            // 检查各个标志位
            const events = [
                { flag: data.fallFlag, type: 'fall', name: '摔倒事件', lastFlag: lastState.fallFlag },
                { flag: data.slowFlag, type: 'slow', name: '减速事件', lastFlag: lastState.slowFlag },
                { flag: data.turnLeftFlag, type: 'turn-left', name: '左转事件', lastFlag: lastState.turnLeftFlag },
                { flag: data.turnRightFlag, type: 'turn-right', name: '右转事件', lastFlag: lastState.turnRightFlag }
            ];
            
            events.forEach(event => {
                // 检测从 0/false 到 1/true 的变化（事件触发）
                if (event.flag === true && event.lastFlag !== true) {
                    addEvent({
                        deviceId: deviceId,
                        type: event.type,
                        name: event.name,
                        timestamp: currentTime
                    });
                    
                    // 如果是跌倒事件，播放语音提示并滚动到事件面板
                    if (event.type === 'fall') {
                        speakText('注意，检测到用户摔倒，请及时处理！');
                        // 延迟一小段时间确保事件已添加到列表再滚动
                        setTimeout(scrollToFallEvent, 100);
                    }
                }
            });
            
            // 更新状态
            lastEventState[deviceId] = {
                fallFlag: data.fallFlag,
                slowFlag: data.slowFlag,
                turnLeftFlag: data.turnLeftFlag,
                turnRightFlag: data.turnRightFlag
            };
        }
        
        // 添加事件到列表
        function addEvent(event) {
            // 添加到事件历史（最新的在前）
            eventHistory.unshift(event);
            
            // 保持最多100条记录
            if (eventHistory.length > 100) {
                eventHistory = eventHistory.slice(0, 100);
            }
            
            // 更新显示
            renderEventList();
        }
        
        // 渲染事件列表
        function renderEventList() {
            const eventList = document.getElementById('event-list');
            const eventCounter = document.getElementById('event-counter');
            
            // 更新计数器
            eventCounter.textContent = '事件总数: ' + eventHistory.length;
            
            if (eventHistory.length === 0) {
                eventList.innerHTML = '<div class="event-empty">暂无事件记录</div>';
                return;
            }
            
            // 为每个事件项添加data-aos属性
            eventList.innerHTML = eventHistory.map((event, index) => {
                // 计算延迟时间，每个事件递增50ms
                const delay = 500 + (index * 50);
                return createEventItem(event, delay);
            }).join('');
            
            AOS.refresh();
        }
        
        // 创建事件项
        function createEventItem(event, delay = 0) {
            const iconSymbols = {
                'fall': '⚠',
                'slow': '🐌',
                'turn-left': '←',
                'turn-right': '→'
            };
            
            return '<div class="event-item" data-aos="fade-left" data-aos-delay="' + delay + '">' +
                '<div class="event-info">' +
                    '<div class="event-icon ' + event.type + '">' + (iconSymbols[event.type] || '•') + '</div>' +
                    '<div class="event-details">' +
                        '<div class="event-type">' + event.name + '</div>' +
                        '<div class="event-device">设备 ID: ' + event.deviceId + '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="event-time">' + formatDateTime(event.timestamp) + '</div>' +
            '</div>';
        }
        
        // 格式化日期时间
        function formatDateTime(dateTime) {
            if (!dateTime) return '无';
            
            const date = new Date(dateTime);
            if (isNaN(date.getTime())) return '无效时间';
            
            return date.getFullYear() + '-' +
                String(date.getMonth() + 1).padStart(2, '0') + '-' +
                String(date.getDate()).padStart(2, '0') + ' ' +
                String(date.getHours()).padStart(2, '0') + ':' +
                String(date.getMinutes()).padStart(2, '0') + ':' +
                String(date.getSeconds()).padStart(2, '0');
        }
        
        // 切换自动刷新
        function toggleAutoRefresh() {
            const button = document.getElementById('auto-refresh-text');
            
            if (isAutoRefreshEnabled) {
                clearInterval(autoRefreshInterval);
                isAutoRefreshEnabled = false;
                button.textContent = '开启自动刷新';
            } else {
                autoRefreshInterval = setInterval(refreshDataWithoutAOS, 2000); // 每2秒刷新，不触发动画
                isAutoRefreshEnabled = true;
                button.textContent = '关闭自动刷新';
            }
        }
        
        // 刷新数据但不触发动画
        async function refreshDataWithoutAOS() {
            showLoading(true);
            hideError();
            
            try {
                // 获取系统状态
                await updateSystemStatus();
                
                // 获取最新的传感器数据
                const response = await fetch(API_BASE_URL + '/latest');
                if (!response.ok) {
                    throw new Error('HTTP ' + response.status + ': ' + response.statusText);
                }
                
                const sensorDataList = await response.json();
                updateSensorData(sensorDataList); // 使用平滑更新而不是重新渲染
                // 检查并处理事件
                sensorDataList.forEach(data => {
                    processDeviceEvents(data);
                    // 更新地图位置（如果有GPS数据）
                    updateMapLocation(data);
                });
                updateLastUpdateTime();
                
            } catch (error) {
                console.error('获取数据失败:', error);
                showError('无法获取传感器数据: ' + error.message);
            } finally {
                showLoading(false);
            }
        }
        
        // 清除轨迹（修复版本）
        function clearTrack() {
            // 清除轨迹数据
            trackPoints = [];
            
            // 移除主轨迹线
            if (trackPolyline) {
                baiduMap.removeOverlay(trackPolyline);
                trackPolyline = null;
            }
            
            // 移除阴影轨迹线
            if (shadowPolyline) {
                baiduMap.removeOverlay(shadowPolyline);
                shadowPolyline = null;
            }
            
            // 移除所有轨迹标记点
            trackMarkers.forEach(marker => {
                if (marker && baiduMap) {
                    baiduMap.removeOverlay(marker);
                }
            });
            trackMarkers = [];
            
            // 更新信息显示
            updateTrackInfo();
            
            console.log('轨迹已完全清除（包括阴影）');
        }
        
        // 清除所有数据
        function clearAllData() {
            // 清除事件历史
            eventHistory = [];
            lastEventState = {};
            renderEventList();
            
            // 清除轨迹数据
            clearTrack();
            
            // 清除传感器数据显示
            document.getElementById('dashboard').innerHTML = '<div class="no-data">数据已清除</div>';
            
            // 重置状态
            document.getElementById('device-count').textContent = '设备数量: 0';
            document.getElementById('last-update').textContent = '最后更新: 从未';
            
            console.log('所有数据已清除');
        }
        
        // 显示加载状态
        function showLoading(show) {
            const loading = document.getElementById('loading');
            loading.style.display = show ? 'block' : 'none';
        }
        
        // 显示错误信息
        function showError(message) {
            const error = document.getElementById('error');
            error.textContent = message;
            error.style.display = 'block';
        }
        
        // 隐藏错误信息
        function hideError() {
            const error = document.getElementById('error');
            error.style.display = 'none';
        }
        
        // 更新最后更新时间
        function updateLastUpdateTime() {
            const now = new Date();
            document.getElementById('last-update').textContent = '最后更新: ' + formatDateTime(now);
        }
        
        // 初始化页面
        function init() {
            updateLastUpdateTime();
            setInterval(updateLastUpdateTime, 1000);
        }
        
        // 为所有按钮添加波纹效果
        document.addEventListener('DOMContentLoaded', function() {
            const buttons = document.querySelectorAll('.btn');
            buttons.forEach(button => {
                button.addEventListener('click', function(e) {
                    // 创建波纹元素
                    const ripple = document.createElement('span');
                    ripple.classList.add('ripple');
                    
                    // 设置波纹位置
                    const rect = this.getBoundingClientRect();
                    const size = Math.max(rect.width, rect.height);
                    const x = e.clientX - rect.left - size / 2;
                    const y = e.clientY - rect.top - size / 2;
                    
                    ripple.style.width = ripple.style.height = size + 'px';
                    ripple.style.left = x + 'px';
                    ripple.style.top = y + 'px';
                    
                    // 添加波纹到按钮
                    this.appendChild(ripple);
                    
                    // 波纹动画结束后移除
                    setTimeout(() => {
                        ripple.remove();
                    }, 600);
                });
            });
        });
    </script>
    
<footer style="color: #00f7ff; font-size: 14px; text-align: center; padding: 30px 20px; position: relative;">
    <h2>灵盔佑驰终端系统</h2>
    © 2025 灵盔佑驰系统项目组 版权所有 | 联系方式：2668379109@qq.com
</footer>

</body>
</html>